<template>
    <div class="addProject business-workAdd">
        <div class="addForm zll-form">
			<el-form :model="addForm" :rules="rules" ref="addForm" class="demo-ruleForm">
				<el-row :gutter="40">
					<el-col :span="12">
						<el-form-item class="formList" prop="customer" label="客户：">
							<el-input clearable class="input_right"  v-model="addForm.customer" :disabled="type == 'see' || type == 'edit'" ></el-input>
						</el-form-item>
						<el-form-item class="formList" prop="complainDate" label="投诉日期：">
                            <el-date-picker
								format="yyyy-MM-dd"
								value-format="yyyy-MM-dd"
								clearable class="input_right" v-model="addForm.complainDate" type="date"  :disabled="type == 'see' || type == 'edit'"></el-date-picker>
						</el-form-item>
						<el-form-item class="formList" prop="orderNum" label="订单号：">
							<el-input  clearable class="input_right"  v-model="addForm.orderNum" :disabled="type == 'see' || type == 'edit'" ></el-input>
						</el-form-item>
						<el-form-item class="formList" prop="batchNum" label="批次号：">
							<el-input clearable class="input_right"  v-model="addForm.batchNum" :disabled="type == 'see' || type == 'edit'" ></el-input>
						</el-form-item>
                    </el-col>
					<el-col :span="12">
						<el-form-item class="formList" prop="complainCode" label="投诉号：">
							<el-input clearable class="input_right"  v-model="addForm.complainCode" disabled></el-input>
						</el-form-item>

						<el-form-item class="formList" prop="complainCode" label="受理状态：">
							<el-select clearable v-model="addForm.acceptStatus" placeholder="受理状态" disabled>
								<el-option label="待受理" value="0"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item class="formList" prop="acceptDeptName" label="受理部门：">
							<el-input clearable class="input_right"  v-model="addForm.acceptDeptName" disabled></el-input>
						</el-form-item>
						<el-form-item class="formList" prop="acceptUserName" label="受理人：">
							<el-input clearable class="input_right"  v-model="addForm.acceptUserName" disabled></el-input>
						</el-form-item>
                    </el-col>
                </el-row>
                <el-form-item class="formList" prop="problemDescription" label="问题描述：">
                    <el-input clearable class="input_right" type="textarea" v-model="addForm.problemDescription" maxlength="100" show-word-limit :disabled="type == 'see' || type == 'edit'"  rows="3"></el-input>
                </el-form-item>
                <el-form-item class="formList" prop="data10" label="附图：">
                    <p class="_tips">图片格式为 jpg、png、gif，单张＜1M，最多上传3张</p>
                    <img-upload limit="3" :imgList="relateImages" type="tousu" ref="imageUpload" :checkSize="true" :isImgSave="true" :hidden="true" :edit="type !== 'add'"></img-upload>
                </el-form-item>
                
                <div class="nav_list" v-if="type !== 'add'">
                    <div class="_title"><i class="el-icon-s-promotion"></i>处理</div>
                    <el-form-item class="formList" prop="opinion" label="意见：">
                        <el-input clearable class="input_right" type="textarea" v-model="addForm.opinion" maxlength="50" show-word-limit :disabled="type == 'see'" ></el-input>
                    </el-form-item>
                    <el-form-item class="formList" prop="reasonAnalysis" label="原因分析：">
                        <el-input clearable class="input_right" type="textarea" v-model="addForm.reasonAnalysis" maxlength="200" show-word-limit :disabled="type == 'see'" rows="3"></el-input>
                    </el-form-item>
                    <el-row :gutter="40">
                        <el-col :span="12">

							<el-form-item class="formList" prop="responsibleUserName" label="责任部门：">
								<el-select clearable v-model="addForm.responsibleDeptName" :disabled="type == 'see'">
									<el-option v-for="item in deptList" :key="item.id" :label="item.deptName" :value="item.deptName"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item class="formList" prop="handleDeptName" label="处理部门：">
								<el-input clearable class="input_right"  v-model="addForm.handleDeptName" disabled></el-input>
							</el-form-item>
                        </el-col>
                        <el-col :span="12">

                            <el-form-item class="formList" prop="responsibleUserName" label="责任姓名：">
								<el-input clearable class="input_right"  v-model="addForm.responsibleUserName" :disabled="type == 'see'"></el-input>
<!--								<el-select clearable class="input_right" v-model="addForm.responsibleUserName" placeholder="责任姓名：" :disabled="type == 'see'">-->
<!--									<el-option v-for="item in employeeList" :key="item.id" :label="item.employeeName" :value="item.employeeName"></el-option>-->
<!--								</el-select>-->
                            </el-form-item>

                            <el-form-item class="formList" prop="handleUserName" label="处理人：">
                                <el-input clearable class="input_right"  v-model="addForm.handleUserName" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>

            </el-form>
        </div>
    </div>
</template>
<script>

import imgUpload from './imgUpload.vue';
import {getStore} from "../../../../../plugins/localStore";
import {formatDate} from "../../../../../plugins/formatDate";
export default {
    props: ['editData','type','acceptUserName'],
    data(){
        return {
            addForm: {
            	id: '',
				customer:'',
				complainDate:'',
				complainCode: '',
				orderNum : '',
				batchNum : '',
				acceptStatus:'0',
				acceptDeptName:'',
				acceptUserName:'',
				problemDescription:'',

				handleTime:'',
				opinion:'找出问题产生的原因，并加以分析整改',
				reasonAnalysis:'',
				handleDeptName:'',
				responsibleDeptName:'',
				handleUserName:'',
				responsibleUserName:'',

				userId: '',
            },

			isEdit: false,

			deptList: [],

			employeeList:[],

			relateImages:[],

			count:0,

            rules: {
				customer: [
                    {required: true, message: '请输入客户', trigger: 'blur'},
                ],
				orderNum: [
					{required: true, message: '请输入订单号', trigger: 'blur'},
				],

				batchNum: [
					{required: true, message: '请输入批次号', trigger: 'blur'},
				],

				complainDate: [
                    {required: true, message: '请选择投诉日期', trigger: 'change'},
                ],
				problemDescription: [
                    {required: true, message: '请输入问题描述', trigger: 'blur'},
                ],
				opinion: [
                    {required: true, message: '请输入质量部意见', trigger: 'blur'},
                ],
				reasonAnalysis: [
                    {required: true, message: '请输入原因分析', trigger: 'blur'},
                ],
            }
        }
    },
    methods: {

		getDeptList(){//获取部门下拉列表
			let self = this;
			self.$http({
				url: "/jinl/dept/queryDeptChooseList",
				method: "post",
			}).then(resp=>{
				if (resp.success) {
					if (resp.result.length > 0){
						self.deptList = resp.result;
					}
				}
			});
		},

		// getEmployeeList(){//获取违章人下拉列表
		// 	let self = this;
		// 	self.$http({
		// 		url: "/jinl/personnelManage/getPersonnelIdAndName",
		// 		method: "post",
		// 		data: JSON.stringify(),
		// 		dataType: 'json',
		// 		contentType: 'application/json',
		// 	}).then(resp=>{
		// 		if (resp.success) {
		// 			if (resp.result.length > 0){
		// 				self.employeeList = resp.result;
		// 			}
		// 		}
		// 	});
		// },


		submitForm(val,type) {
			let self = this;
			self.$refs['addForm'].validate((valid) => {
				if (valid) {
					self.operate();
				} else {
					return false;
				}
			});
		},

		operate(){
			let self = this;

			let user = getStore();
			self.addForm.userId = user.id;
			let url = self.addForm.id ? '/jinl/complain/updateComplainHandle' : '/jinl/complain/addComplainHandle';

			if (self.addForm.id){
				self.addForm.handleTime = formatDate(new Date(),'yyyy-MM-dd hh:mm:ss');
				self.addForm.handleUserName = user.userName;
				self.addForm.acceptStatus = '1';
				self.addForm.acceptUserName = this.acceptUserName;

			}else{
				self.addForm.acceptUserName = user.userName;
			}

			let param = Object.assign({},self.addForm);

			//picture
			let uploadImages = self.$refs.imageUpload.getImages();
			if (uploadImages.length != 0){
				param.fileInfos = uploadImages;
			}

			if (this.count == 0){
				self.count++;
				self.$http({
					url: url,
					method: "post",
					data: JSON.stringify(param),
					dataType: 'json',
					contentType: 'application/json',
				}).then(resp => {
					if (resp.success) {
						self.$message.success('操作成功');
						self.$emit('refreshData');
						return;
					}
					self.$message.error(resp.message);
					self.count--;
				})
			}
		},

		//get file
		getRelatePicture(id){
			let self = this;
			let url = '/jinl/file/selectFileByRelateId';
			let param = {relateId : id};
			self.$http({
				url: url,
				method: "post",
				data: JSON.stringify(param),
				dataType: 'json',
				contentType: 'application/json',
			}).then(resp => {
				if (resp.success) {

					let index = 0;

					for (let data of resp.result) {
						let file = {fileBlob:data.fileUrl || '',id:data.id};
						if (file.id){
							file.fileName = data.id;
						} else{
							file.fileName = 'img'+index;
						}
						index++;
						this.relateImages.push(file);
					}
					return;
				}
				self.$message.error(resp.message);
			});
		}
    },
    mounted(){
    	let self = this;
		self.getDeptList();
		// self.getEmployeeList();

    },

	watch: {
    	editData(val) {

    		this.relateImages = [];

    		if (Object.getOwnPropertyNames(val).length > 1){
    			this.addForm = Object.assign({},val);

    			let id = this.addForm.id;

    			//file
				this.getRelatePicture(id);
			}
		}
	},

    components: {imgUpload},
}
</script>
<style lang="scss" scoped>
@import "@/style/dialog.scss";
._tips {
    color: #999;font-size: 12px;
}
.nav_list {
    margin-top: 20px;
    ._title {
        line-height: 40px;
        color: #00D1D0;
        i {
            font-size: 16px;
            margin-right: 5px;
        }
    }
}
._download_list {
    display: flex;
    color: #f44336;
    line-height: 32px;
    .iconfont {
        margin-right: 5px;
    }
    ._download {
        color: #8bc34a;
        margin-left: 10px;
        cursor: pointer;
    }
}
</style>